<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC 演示</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <h1>问题1：相邻盒子边距重叠</h1>
  <div class="bar">
    <h2>下面两个盒子的间距应是多少，是200px吗？</h2>
    <button id="b1">点击创建BFC</button>
  </div>
  <div id="bfc1">
    <div class="box">
      我的 margin-bottom 是100px
    </div>
  </div>
  <div class="box">
    我的 margin-top 是100px
  </div>
  <h1>问题2：父子盒子边距重叠</h1>
  <div class="bar">
    <h2>蓝色盒子的上边距是多少，是200px吗？</h2>
    <button id="b2">点击创建BFC</button>
  </div>
  <div class="fu" id="bfc2">
    <div class="zi"></div>
  </div>

  <h1>问题3：浮动导致重叠</h1>
  <div class="bar">
    <h2>如何解决遮挡现象？</h2>
    <button id="b3">点击创建BFC</button>
  </div>
  <div style="margin-top: 50px">
    <div class="side">侧栏</div>
    <div class="main" id="bfc3">主体</div>
  </div>

  <h1>问题4：浮动元素的容器未被撑开</h1>
  <div class="bar">
    <h2>导航栏的黑色背景到哪里去了？</h2>
    <button id="b4">点击创建BFC</button>
  </div>
  <div id="bfc4" class="nav">
    <ul>
      <li>页面1</li>
      <li>页面2</li>
      <li>页面3</li>
    </ul>
  </div>
  <script src="./main.js"></script>
</body>
</html>